<template>
	<a-modal v-bind="option">
		<vxe-table ref="table" :data="bills" v-bind="billTableOption">
			<vxe-column title="费用科目" field="feeSubjectName" />
			<vxe-column title="费用承担方" width="200" align="center">
				<template #default="{row}">
					<a-radio-group v-model:value="row.type" @change="radioChange">
						<a-radio :value="1">公司</a-radio>
						<a-radio :value="2">员工</a-radio>
					</a-radio-group>
				</template>
			</vxe-column>
		</vxe-table>

		<template #footer>
			<a-radio-group v-model:value="checkAll">
				<a-radio :value="1">全选公司</a-radio>
				<a-radio :value="2">全选员工</a-radio>
			</a-radio-group>
			<a-button type="primary" :loading="loadings.save" @click="submit">保存</a-button>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, reactive, ref, toRaw, toRef, watch} from 'vue'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {DEFAULT_FIELD_NAME, DIC_LABEL_MAP, DIC_PID_MAP} from 'yuxin-base/src/constant'
	import {VxeTableProps, VxeTableInstance} from 'vxe-table'
	import {CharterContract} from '@/interface/contract'
	import {getDispose} from '@/api/charter-contract'

	const props = defineProps<{
		visible: boolean
		cost?: any[]
		id?: string
	}>()

	const entity = toRef(props, 'cost')

	const loadings = reactive({
		save: false
	})

	const emits = defineEmits(['update:visible', 'success'])
	const option = reactive({
		width: 640,
		title: '费用支付配置',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		bodyStyle: {
			padding: '12px'
		},
		onCancel() {
			bills.value = []
			emits('update:visible', false)
		}
	})

	const checkAll = ref<any>(1)

	// 获取字典列表
	const getDictionaryListDict = () => {
		settingApi.getDicListByLabel(DIC_LABEL_MAP['FEESUBJECT']).then(({data}) => {
			data.map((e: any) => {
				e.metaList?.map((item: any) => {
					bills.value.push({
						feeSubjectId: item.id,
						feeSubjectName: item.name,
						type: 1
					})
				})
			})

			// 如果props有值 回显
			entity.value?.map((i: any) => {
				bills.value.map((j: any) => {
					if (i.id === j.id) j.type = i.type
				})
			})

			table.value?.loadData(bills.value as [])
		})
	}

	const bills = ref<any>([])
	const table = ref<VxeTableInstance>()
	const billTableOption = reactive<VxeTableProps>({
		size: 'mini',
		height: 600,
		rowConfig: {
			isHover: true
		}
	})

	const radioChange = (item: any) => {
		let value = item.target.value
		bills.value.forEach((e: any) => {
			if (e.type !== value) checkAll.value = null
		})
	}

	// 确认
	const submit = () => {
		emits('success', bills.value)
		option.onCancel()
	}

	watch(
		() => props.visible,
		() => {
			if (props.visible) {
				if (props?.cost.length) {
					bills.value = props.cost
				} else {
					if (props.id) {
						// 这里表示就是续租
						getDisposeF()
					} else {
						// 这里是新增
						getDictionaryListDict()
					}
				}
			}
		}
	)
	const getDisposeF = () => {
		getDispose(props.id as string).then((res: any) => {
			bills.value = res.data
			if (res.data.every((e: any) => e.type === 1)) {
				checkAll.value = 1
			} else if (res.data.every((e: any) => e.type === 2)) {
				checkAll.value = 2
			} else {
				checkAll.value = null
			}
		})
	}

	watch(
		() => checkAll.value,
		() => {
			if (checkAll.value) {
				bills.value.forEach((e: any) => {
					e.type = checkAll.value
				})
				// table.value?.reloadData(bills.value as [])
			}
		}
	)
</script>

<style lang="less" scoped></style>
